<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd',
                            400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8',
                            800: '#1e40af', 900: '#1e3a8a'
                        }
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen">
    <!-- 导航由 shared-navigation.js 统一管理 -->
    
    <main class="container mx-auto px-6 py-8">
        <div class="bg-white rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
            <h1 class="text-3xl font-bold text-gray-800 mb-6">新导航结构测试</h1>
            
            <div class="space-y-6">
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <h2 class="text-lg font-semibold text-blue-800 mb-2">🎯 导航优化目标</h2>
                    <ul class="text-blue-700 space-y-1">
                        <li>✅ 按功能分类组织导航项</li>
                        <li>✅ 使用下拉菜单减少导航栏拥挤</li>
                        <li>✅ 统一所有页面的导航体验</li>
                        <li>✅ 实现真正的DRY原则组件复用</li>
                    </ul>
                </div>
                
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <h2 class="text-lg font-semibold text-green-800 mb-2">📁 新导航分类</h2>
                    <div class="grid md:grid-cols-2 gap-4 text-green-700">
                        <div>
                            <h3 class="font-medium">🏠 核心功能</h3>
                            <ul class="ml-4 text-sm">
                                <li>• 首页（数据看板）</li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="font-medium">📹 内容管理</h3>
                            <ul class="ml-4 text-sm">
                                <li>• 视频管理</li>
                                <li>• 我的收藏</li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="font-medium">📊 趋势分析</h3>
                            <ul class="ml-4 text-sm">
                                <li>• 趋势雷达</li>
                                <li>• 爆款搜索</li>
                                <li>• 商机发现</li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="font-medium">🛠️ 工具箱</h3>
                            <ul class="ml-4 text-sm">
                                <li>• 文档转换</li>
                                <li>• 语音合成</li>
                                <li>• MHTML转PDF</li>
                                <li>• 学生证生成</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <h2 class="text-lg font-semibold text-yellow-800 mb-2">🔄 统一页面</h2>
                    <p class="text-yellow-700 mb-2">以下页面已使用统一导航组件：</p>
                    <div class="grid md:grid-cols-3 gap-2 text-sm">
                        <span class="bg-yellow-100 px-2 py-1 rounded">✅ index.html</span>
                        <span class="bg-yellow-100 px-2 py-1 rounded">✅ indie-navigator.html</span>
                        <span class="bg-yellow-100 px-2 py-1 rounded">✅ student-id-generator.html</span>
                        <span class="bg-gray-100 px-2 py-1 rounded">⏳ videos.html</span>
                        <span class="bg-gray-100 px-2 py-1 rounded">⏳ trending.html</span>
                        <span class="bg-gray-100 px-2 py-1 rounded">⏳ 其他页面...</span>
                    </div>
                </div>
                
                <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                    <h2 class="text-lg font-semibold text-purple-800 mb-2">🎨 交互特性</h2>
                    <ul class="text-purple-700 space-y-1">
                        <li>• 鼠标悬停显示下拉菜单</li>
                        <li>• 当前页面高亮显示</li>
                        <li>• 父级菜单会根据子页面激活状态高亮</li>
                        <li>• 平滑的动画过渡效果</li>
                    </ul>
                </div>
                
                <div class="text-center">
                    <p class="text-gray-600">
                        🎉 新导航已启用！现在所有页面都使用统一的导航组件。
                    </p>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 脚本 -->
    <script src="../js/config.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/shared-navigation.js"></script>
</body>
</html>